<template>
  <div class="personal-details">
    <el-card>
      <div class="header">
        <h2>基本资料</h2>
        <el-button type="primary" v-if="!isEditing" @click="editProfile"
          >编辑资料</el-button
        >
        <div v-if="isEditing">
          <el-button type=" primary" @click="saveProfile">保存</el-button>
          <el-button @click="cancelEdit">取消</el-button>
        </div>
      </div>
      <el-form :model="user" label-width="120px">
        <el-form-item label="姓名">
          <el-input v-model="user.name" :disabled="!isEditing"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="user.gender" :disabled="!isEditing">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
            <el-option label="非二元性别" value="非二元性别"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工号">
          <el-input v-model="user.employeeId" :disabled="!isEditing"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="user.department" :disabled="!isEditing"></el-input>
        </el-form-item>
        <el-form-item label="职务">
          <el-input v-model="user.position" :disabled="!isEditing"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="user.phone" :disabled="!isEditing"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="user.email" :disabled="!isEditing"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="user.address" :disabled="!isEditing"></el-input>
        </el-form-item>
      </el-form>
      <div class="actions">
        <el-button type="default" @click="changeAvatar">更换头像</el-button>
        <el-button type="danger" @click="resetPassword">重置密码</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter()

    const changeAvatar = () => {
      // 更换头像的逻辑
      console.log('更换头像')
      router.push('/user/avatar')
    }
    const resetPassword = () => {
      // 重置密码的逻辑
      console.log('重置密码')
      router.push('/user/password')
    }

    return {
      changeAvatar,
      resetPassword
    };
  },
  data() {
    return {
      isEditing: false,
      originalUser: {},
      user: {
        name: '张三',
        gender: '男',
        employeeId: '123456',
        department: '技术部',
        position: '工程师',
        phone: '123-456-7890',
        email: 'zhangsan@example.com',
        address: '北京市海淀区'
      }
    }
  },
  methods: {
    editProfile() {
      this.isEditing = true
      this.originalUser = { ...this.user } // 保存原始数据以便取消时恢复
    },
    saveProfile() {
      this.isEditing = false
      // 可以添加保存到服务器的逻辑
      console.log('资料已保存', this.user)
    },
    cancelEdit() {
      this.isEditing = false
      this.user = { ...this.originalUser } // 恢复原始数据
      console.log('取消编辑')
    },

  }
}
</script>


<style scoped>
.personal-details {
    padding: 20px;
  background-color: #f5f5f5;
  }
  
  .el-card {
    max-width: 650px;
    margin: 0 auto;
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .actions {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
  }
  
  .el-form-item {
    margin-bottom: 20px;
  }
  </style>
  